<template>

	<view class="page">

		<view class="publishButton">
			<image src="/static/img/bianji.png" mode="" @click="tianjairiji()"></image>
		</view>



		<view class="shang">
			<view class="zuishangcen">
				<text>首页</text>
				<view class="tupianhezi1">
					<img class="duanxintupian" src="/static/img/qiehuan.png" alt="">
					<text class="qiehuanzhanghao">切换账号</text>
				</view>
			</view>

			<view class="touxiang">
				<view class="neitouxiang">
					<!-- 	<img class="xingbietubiao" src="/static/img/sex_man.png" alt=""> -->
					<img class="xingbietubiao" src="/static/img/sex_woman.png" alt="">
				</view>
			</view>
			<textarea class="mingzi" @tap="babyInfo">
				<text>梓宁宝宝</text>
			</textarea>
			<view class="yueshu" @tap="babyInfo">
				<text class="yueshu2">6个月</text>
				<img class="xiugai" src="/static/img/xiugai.png" alt="">
			</view>
		</view>



		<view class="nav">
			<view class="navview" @click="gotoBybyHeight()">
				<img class="navimg" src="/static/img/ceshi.png" alt="">
				<text class="navtext">成长记录</text>
			</view>
			<view class="navview" @click="gotorijiliebiao()">
				<img class="navimg" src="/static/img/ceshi.png" alt="">
				<text class="navtext">宝宝日记</text>
			</view>
			<view class="navview" @tap="vaccination">
				<img class="navimg" src="/static/img/ceshi.png" alt="">
				<text class="navtext">疫苗接种</text>
			</view>
		</view>


		<view class="" v-for="note in noteLiebiao">
			<view class="Contentzuiwaiquan" v-if="note.type=='笔记'">
				<view class="Cotentshang">
					<img src="/static/img/quan.png" alt="">
					<text class="zuijintianshu">{{note.publishDay}}</text>
					<view class="zongtianshu">
						<text>第</text>
						<text class="zongtianshushuzi">{{note.notes.recordDay}}</text>
						<text>天</text>
					</view>

				</view>

				<view class="waiContent" v-if="note.type=='笔记'">
					<view class="content" @tap="diaryInfo">

						<view class="tupianhezi">
							<img :src="picture" alt="" v-for="(picture,index) in note.notes.pictures">

						</view>
						<view class="wenbenkuang">
							宝宝今天482天了，一晃好久没给宝宝记东西了。时间是最大的敌人，也是最大的朋友，可惜错过了太多的记录，
							而且这种记录再也找不回来。很多细节无法去弥补。宝宝现在长大了，厉害的很，特能跑，醒着的时候一刻不闲的，
							总动来动去。而且现在不给人抱着了，一定要跑地上去玩。语言上能听懂百分之七十的话啦，
							很多时候语言交流。慢慢发简单的音，会叫爸爸妈妈了。除了行动和语言之外，想法也多了，自己很多小心思。
						</view>
						<view class="quanwenview">
							<text>全文</text>
						</view>
						<view class="shijian">
							<text>{{note.publishTime}}</text>
						</view>

					</view>
				</view>
			</view>




			<view class="Contentzuiwaiquan" v-if="note.type=='身高'">
				<view class="Cotentshang">
					<img src="/static/img/quan.png" alt="">
					<text class="zuijintianshu">{{note.publishDay}}</text>
					<view class="zongtianshu">
						<text>第</text>
						<text class="zongtianshushuzi">{{note.notes.recordDay}}</text>
						<text>天</text>
					</view>
				</view>
				<view class="waiContent">
					<view class="content">
						<view class="sanwei">
							<view>
								<text class="weizhi">身高: </text><text> {{note.notes.cdHeight}}cm</text>
							</view>

						</view>

						<view class="shijian">
							<text>{{note.publishTime}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="Contentzuiwaiquan" v-if="note.type=='体重'">
				<view class="Cotentshang">
					<img src="/static/img/quan.png" alt="">
					<text class="zuijintianshu">{{note.publishDay}}</text>
					<view class="zongtianshu">
						<text>第</text>
						<text class="zongtianshushuzi">{{note.notes.recordDay}}</text>
						<text>天</text>
					</view>
				</view>
				<view class="waiContent">
					<view class="content">
						<view class="sanwei">

							<view>
								<text class="weizhi">体重: </text><text> {{note.notes.cdWeight}}kg</text>
							</view>

						</view>

						<view class="shijian">
							<text>{{note.publishTime}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				id: '',
				token: '',
				noteLiebiao: ''
			}
		},
		onLoad() {
			this.token = uni.getStorageSync("Authorization")
			this.huoqunoteliebiao()

		},
		methods: {
			gotoBybyHeight(){
				uni.redirectTo({
					url:"/pages/babyHeight/babyHeight?childrenId=6"
				})
			},
			gotobabybianji() {
				uni.navigateTo({
					url: "/pages/baby/baby"
				})
			},
			vaccination() {
				uni.navigateTo({
					url: '/pages/vaccination/vaccination'
				})
			},
			diaryInfo() {
				uni.navigateTo({
					url: '/pages/DiaryInfo/DiaryInfo'
				})
			},
			babyInfo() {
				uni.navigateTo({
					url: '/pages/changeInfo/changeInfo'
				})
			},
			
			tianjairiji() {
				uni.navigateTo({
					url: "/pages/tianjiariji/tianjiariji"
				})
			},
			gotorijiliebiao() {
				uni.navigateTo({
					url: "/pages/diary/diary"
				})
			},
			huoqunoteliebiao() {

				uni.request({
					url: this.$serverUrl + "/api/notes/allNotes?childrenId=6",
					header: {
						Authorization: this.token
					},
					success: (result) => {
						this.noteLiebiao = result.data.data.notes
						this.noteLiebiao.reverse()
						console.log(this.noteLiebiao)
						console.log("获取了")
						let length = this.noteLiebiao.length
						console.log("长度是", length)
						for (var i = 0; i < length; i++) {
							if (this.noteLiebiao[i].type == "笔记") {
								var picture = this.noteLiebiao[i].notes.pictures
								var allpciture = picture.split(",")
								allpciture.pop()
								for (var j = 0; j < allpciture.length; j++) {
									console.log(allpciture[j])
									this.noteLiebiao[i].notes.pictures = allpciture
									console.log(this.noteLiebiao[i].notes.pictures)
								}

							}
							var shangchaunshijian = this.noteLiebiao[i].publishTime
							var shangchuanshijian2 = shangchaunshijian.substring(0, 19)
							var shangchaunshijian3 = shangchuanshijian2.substring(0, 10)
							var shangchaunshijian4 = shangchuanshijian2.substring(11, 19)
							var shangchuanshijian5 = shangchaunshijian3 + " " + shangchaunshijian4
							var date = shangchuanshijian5.replace(/-/g, '/')
							var timestamp = new Date(date).getTime();
							var nowDate = new Date()
							var dateDiff = nowDate.getTime() - timestamp
							var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
							var leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
							var hours = Math.floor(leave1 / (3600 * 1000)) //计算出小时数
							//计算相差分钟数
							var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
							var minutes = Math.floor(leave2 / (60 * 1000)) //计算相差分钟数
							//计算相差秒数
							var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
							var seconds = Math.round(leave3 / 1000)
							console.log(" 相差 " + dayDiff + "天 " + hours + "小时 " + minutes + " 分钟" + seconds +
								" 秒")
							this.noteLiebiao[i].publishDay=shangchaunshijian3.replace(/-/g,"/")
							if(dayDiff<3){
								this.noteLiebiao[i].publishDay="前天"
							}
							if(dayDiff<2){
								this.noteLiebiao[i].publishDay="明天"
							}
							if(dayDiff<1){
								this.noteLiebiao[i].publishDay="今天"
							}
							if(seconds>0)	{
								this.noteLiebiao[i].publishTime= seconds +"秒前"
							}
							if(minutes>0){
							
								this.noteLiebiao[i].publishTime= minutes +"分钟前"
								
							}
								
							if(hours>0){
								
								this.noteLiebiao[i].publishTime= hours +"小时前"
								}
							if(dayDiff>0){
								this.noteLiebiao[i].publishTime= dayDiff +"天前"
							}
							if(dayDiff>=30){
								var jisaunMouth=dayDiff/30
								var mouthString=jisaunyear+""
								var moutrh = mouthString.substring(0,mouthString.indexOf("."));
								this.noteLiebiao[i].publishTime= year +"月前"
							}
								
								
							if(dayDiff>=365){
								var jisaunyear=dayDiff/365
								var yearString=jisaunyear+""
								var year = yearString.substring(0,yearString.indexOf("."));
								this.noteLiebiao[i].publishTime= year +"年前"
							}
							
								




							// var now = new Date();
							// let chajuTime=now.getTime()-this.noteLiebiao[i].publishTime
							// console.log("差距时间：",chajuTime)
						}

					},
					fail: (error) => {
						console.log(error)
					}
				})
			}


		}
	}
</script>

<style>

	.page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.publishButton {
		height: 60px;
		width: 60px;
		line-height: 60px;
		background-color: #666ee8;
		color: white;
		text-align: center;
		border-radius: 50%;
		position: fixed;
		bottom: 3%;
		right: 6%;
		display: flex;
	}
	

	.zuishangcen {

		margin-top: 12%;
		display: flex;

	}

	.zuishangcen text {
		font-size: 30px;
		width: 100px;
		text-align: left;
		font-weight: bold;
		margin-left: 5%;
		height: 30px;
		line-height: 30px;
		display: inline-block;
	}


	.tupianhezi1 {
		margin-left: 30%;
		display: inline-block;
		height: 30px;
		width: 20%;
		display: flex;

	}

	.duanxintupian {
		height: 17px;
		width: 17px;
		margin: auto;
	}

	.zuishangcen .qiehuanzhanghao {
		font-size: 15px;
		font-weight: 100;
		width: 90px;
		color: #666ee8;
	}

	.publishButton image {
		width: 30px;
		height: 30px;
		margin: auto;
	}

	.shang {
		display: flex;
		width: 100%;
		position: relative;
		height: 300px;
		background: #f2f2f2;
		border-radius: 10%;
		flex-direction: column;
	}


	.touxiang {
		width: 109px;
		height: 109px;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		background: white;
		border-radius: 50%;
	}

	.neitouxiang {
		width: 99px;
		height: 99px;
		background: #cccccc;
		border-radius: 50%;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
	}

	.mingzi {
		display: block;
		width: 100px;
		height: 30px;
		position: absolute;
		top: 71%;
		bottom: 0;
		right: 0;
		left: 38%;
		font-size: 20px;
		text-align: center;

	}

	.yueshu {
		display: flex;
		width: 100px;
		height: 20px;
		position: absolute;
		top: 82%;
		bottom: 0;
		right: 0;
		left: 44%;
		font-size: 15px;
		text-align: center;

	}

	.xingbietubiao {
		position: absolute;
		top: 0px;
		button: 10;
		left: 80px;
		right: 0;
		height: 30px;
		width: 30px;
	}

	.yueshu2 {
		display: inline-block;
		line-height: 20px;
		height: 20px;
	}

	.xiugai {
		vertical-align: center;
		height: 20px;
		width: 20px;
	}

	.nav {
		display: flex;
		width: 100%;
		height: 110px;

		flex-direction: row;
		justify-content: space-around;
		text-align: center;
		margin-top: 20px;

	}

	.navtext {
		display: inline-block;
		margin-top: 10px;
	}

	.navimg {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		display: block;

	}

	.Contentzuiwaiquan {
		width: 100%;
		display: flex;
		margin-bottom: 40px;

		flex-direction: column;
	}

	.Cotentshang {
		width: 100%;
		height: 25px;
		display: flex;
	}

	.Cotentshang image {
		width: 25px;
		height: 25px;

	}

	.Cotentshang text {

		text-align: justify;
		display: inline-block;
		line-height: 25px;
		height: 25px;
	}

	.zuijintianshu {
		width: 70%;
		margin-left: 10px;
		font-size: 20px;
	}

	.zongtianshu {
		margin-left: 1%;
		font-size: 16px;
		color: #a0a0a5;
	}

	.zongtianshushuzi {
		color: #666ee8;
		font-size: 20px;
	}

	.waiContent {

		width: 97%;
		margin-left: 2.5%;
		border-left: 3px solid #f2f2f2;
	}

	.content {

		margin: 2% 5% 0 5%;
		box-shadow: 10px 10px 100px 10px #dfdfdf;
		border: 2px solid white;
		border-radius: 5%;
	}

	.tupianhezi {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin: 3% 3% 0 3%;
	}

	.content image {
		width: 110px;
		height: 75px;
		margin-bottom: 2%;
		border-radius: 5px;
	}

	.wenbenkuang {
		margin-left: 3%;
		margin-right: 3%;
		letter-spacing: 2px;
		height: 145rpx;
		overflow: hidden;
		padding: 5rpx;
		color: #a7b3c3;
	}

	.quanwenview {
		color: #5555ff;
		margin-left: 85%;
		margin-top: 5px;
	}

	.shijian {
		margin-left: 3%;
		color: #a7b3c3;
		font-size: 15px;
		height: 30px;
		line-height: 30px;
	}

	.title {
		font-size: 20px;
		margin-left: 5%;
	}

	.sanwei {
		font-size: 20px;
		margin-left: 3%;
		margin-top: 2%;
		margin-bottom: 4%;
	}

	.weizhi {
		
		color: #99a4a2;
	}
</style>
